<template>
	<view class="">
		<view class="" style="width: 100%; position: fixed; top: 0; z-index: 999; background: #fff">
			<view class="topFixed">
				<view class="" :style="'height:' + navBarInfo.statusBarHeight + 'px;'"></view>
				<view class="flex align-center justify-between" :style="'height:' + navBarInfo.navBarHeight + 'px;'">
					<view @click="onLocation" class="flex flex-1 align-center" style="">
						<view style="font-size: 0; padding-left: 24rpx">
							<image style="width: 42rpx; height: 42rpx" src="https://sz.vvv5g.com/assets/img/wxImg/dingwei.png"></image>
						</view>
						<view class="text-overflow1" style="font-size: 30rpx; color: #333333">
							{{ positionText ? positionText : address ? address : '请选择' }}
						</view>
						<view style="font-size: 0">
							<image style="width: 42rpx; height: 42rpx" src="https://sz.vvv5g.com/assets/img/wxImg/downArrow.png"></image>
						</view>
					</view>
					<view class="text-overflow1 flex align-center justify-center" style="font-size: 32rpx; color: #fff">
						<view class="flex align-center" style="background: #f4f4f4; border-radius: 32rpx">
							<view
								@click="changeRange(0)"
								style="padding: 12rpx 30rpx; border: 2rpx solid transparent; border-radius: 32rpx; font-size: 28rpx; color: #999"
								:style="rangeIndex == 0 ? 'color:#ffffff;background:#EBBF88;' : ''"
							>
								同城
							</view>
							<view
								@click="changeRange(1)"
								style="padding: 12rpx 30rpx; border: 2rpx solid transparent; border-radius: 32rpx; font-size: 28rpx; color: #999"
								:style="rangeIndex == 1 ? 'color:#ffffff;background:#EBBF88;' : ''"
							>
								全国
							</view>
						</view>
					</view>
					<view class="flex-1"></view>
				</view>
				<!-- 搜索 -->
				<view
					class="flex align-center"
					style="
						width: 702rpx;
						height: 64rpx;
						background: url(https://sz.vvv5g.com/assets/img/wxImg/searchBorder.png);
						background-size: 702rpx 64rpx;
						background-repeat: no-repeat;
						margin: 0 auto;
					"
				>
					<view class="" style="font-size: 0; padding-left: 32rpx">
						<image style="width: 32rpx; height: 32rpx" src="https://sz.vvv5g.com/assets/img/wxImg/search.png"></image>
					</view>
					<view class="" style="font-size: 0; margin: 0 20rpx">
						<image style="height: 20rpx" src="https://sz.vvv5g.com/assets/img/wxImg/searchBar.png" mode="heightFix"></image>
					</view>
					<input
						class="flex-1"
						type="text"
						@input="search"
						v-model="keyWord"
						placeholder="商品名/品牌/商品种类/关键字"
						style="font-size: 22rpx"
						placeholder-style="font-size:22rpx;color:#999"
					/>
				</view>
				<!-- 占位置 -->
				<view class="" style="height: 26rpx"></view>
				<!-- 分类 -->
				<view class="dom" style="background: #ffffff; padding-bottom: 24rpx; z-index: 999">
					<view class="flex align-center" style="margin: 0 80rpx 0 32rpx; position: relative">
						<scroll-view style="white-space: nowrap; font-size: 0" scroll-with-animation scroll-x="true" :scroll-into-view="'t' + tid">
							<view style="display: inline-block; margin-right: 28rpx; position: relative" v-for="(item, index) in navList" :key="index" @click="clickNavList(item.id)">
								<view :id="'t' + item.id" style="height: 34rpx" class="flex flex-column justify-center align-center">
									<!-- font-weight:700; -->
									<view class="flex align-center" style="font-size: 28rpx; color: #666; z-index: 99" :style="navIndex == index ? 'color:#333;' : ''">
										{{ item.name }}
									</view>
								</view>
								<view class="" v-if="tid == item.id" style="font-size: 0; position: absolute; right: 0; bottom: 0">
									<image style="width: 81rpx; height: 15rpx" src="@/static/store/fenglei3.png"></image>
								</view>
							</view>
						</scroll-view>
						<view class="flex justify-center fenlei" @click="onXianS">
							<image style="width: 34rpx; height: 34rpx" src="@/static/store/fenglei2.png"></image>
						</view>
					</view>
					<!-- 占位置 -->
					<view class="" style="height: 28rpx"></view>
					<!-- 排序类型 -->
					<view class="screen_list_box flex justify-evenly">
						<view class="list_box flex align-center" v-for="(item, index) in screen_list" :key="index" @click="onActive(index)">
							<view :class="listIndex == index ? 'active_txt' : 'active_txt1'" style="font-size: 24rpx">
								{{ item.txt }}
							</view>
							<image class="img" :src="listIndex == index ? item.img1 : item.img"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" :style="'height:' + topFixedHeight + 'px;'"></view>
		<!-- 商品列表 -->
		<view class="">
			<view class="flex" v-for="(item, index) in shopList" style="margin: 0 32rpx; padding: 32rpx 0 30rpx 0; border-bottom: 2rpx solid #f4f4f4">
				<view class="" style="font-size: 0; margin-right: 20rpx">
					<image style="width: 170rpx; height: 170rpx; border-radius: 8rpx; background: #f2f2f2" :src="item.image_src"></image>
				</view>
				<view class="flex flex-1 flex-column justify-between" style="height: 170rpx">
					<view class="">
						<view class="text-overflow1" style="font-size: 32rpx; color: #333333">
							{{ item.title }}
						</view>
						<view class="" style="margin-top: 8rpx; font-size: 24rpx; color: #999">原价￥{{ item.market_price }}</view>
					</view>
					<view class="flex align-end justify-between">
						<view class="flex align-end" style="color: #ff3f4a">
							<view style="font-size: 24rpx; font-weight: 700; padding-bottom: 6rpx">￥</view>
							<view style="font-size: 44rpx; font-weight: 700">
								{{ item.price }}
							</view>
						</view>
						<view
							class="flex align-center justify-center"
							:style="item.btnStatus == '去抢购' ? 'background:#FF3F4A;' : 'background:#ccc;'"
							style="width: 152rpx; height: 68rpx; border-radius: 34rpx; font-size: 28rpx; color: #fff"
						>
							{{ item.btnStatus }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 筛选弹窗 -->
		<view class="fu_chuang" v-if="show" @click="show = false">
			<view class="c_fu_chuang mar-auto">
				<view class="c_fu_txt_box flex">
					<view class="list_txt" v-for="(item, index) in navList" :key="index" @click="fuActive(item.id)">
						<view class="fu_txt s28">
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			navBarInfo: {},
			topFixedHeight: 0,
			rangeIndex: 1, //0 同城 1 全国
			//搜索
			keyWord: '',
			// 分类列表
			navList: [],
			tid: 0,
			navIndex: 0,
			show: false,
			isFixed: false,
			domHeight: 0,
			topheight: 0,
			screen_list: [
				{
					img: '/static/Group 122.png',
					img1: '/static/Group 3814.png',
					txt: '价格排序'
				},
				{
					img: '/static/Group 121.png',
					img1: '/static/Group 3817.png',
					txt: '最新上架'
				},
				{
					img: '/static/Group 942.png',
					img1: '/static/Group 3815.png',
					txt: '人气爆款'
				},
				{
					img1: '/static/Group 3816.png',
					img: '/static/Group 941.png',
					txt: '评分最高'
				}
			],
			listIndex: 0,
			flag: true,
			page: 1,
			lastPage: 0,
			shopList: [],
			currentTime: ''
		};
	},
	computed: {
		address() {
			return this.$store.state.getLocation.address;
		},
		address2() {
			return this.$store.state.getLocation.address2;
		},
		// 选择的位置
		positionText() {
			return this.$store.state.getLocation.positionText;
		},
		selectedAddress() {
			return this.$store.state.getLocation.selectedAddress;
		},
		//选择位置经纬度
		lat() {
			return this.$store.state.getLocation.lat;
		},
		lng() {
			return this.$store.state.getLocation.lng;
		},
		rangeObj() {
			return this.$store.state.getLocation.rangeObj;
		},
		...mapState(['icon'])
	},
	watch: {
		// 此处监听variable变量，当期有变化时执行
		rangeObj(newData, oldData) {
			// item1为新值，item2为旧值
			this.changeRange(newData.home);
		}
	},
	onLoad(options) {
		let date = new Date().getTime();
		let number = date / 1000;
		this.currentTime = number.toFixed(0);
		this.navBarInfo = this.$navBarInfo;
		setTimeout(() => {
			const query = uni.createSelectorQuery().in(this);
			query
				.select('.topFixed')
				.boundingClientRect((data) => {
					this.topFixedHeight = data.height;
				})
				.exec();
		}, 300);
		this.getCategoryList();
	},
	onReachBottom() {
		this.page++;
		if (this.page >= this.lastPage) return this.$wanlshop.msg('我是有底线的!');
		this.getList();
	},
	methods: {
		//获取商品列表
		getList() {
			const that = this;
			let latitude = uni.getStorageSync('location').latitude;
			let longitude = uni.getStorageSync('location').longitude;
			this.$request({
				url: 'product/seckills',
				method: 'POST',
				data: {
					sort: this.listIndex == 0 ? 'price' : this.listIndex == 1 ? 'updatetime' : this.listIndex == 2 ? 'views' : this.listIndex == 3 ? 'praise' : '',
					order: this.flag ? 'asc' : 'desc',
					starttime: -1,
					cat_id: this.tid,
					keyword: this.keyWord,
					new_area: this.rangeIndex == 1 ? '' : this.selectedAddress ? this.selectedAddress : this.address2 ? this.address2 : '',
					lng: this.lng ? this.lng : longitude ? longitude : 0,
					lat: this.lat ? this.lat : latitude ? latitude : 0,
					page: this.page
				}
			}).then((res) => {
				const { code, data, msg } = res.data;
				if (code == 1) {
					let list = data.list.data;
					console.log(that.currentTime);
					for (let i = 0; i < list.length; i++) {
						if (that.currentTime > list[i].endtime) {
							list[i].btnStatus = '已结束';
						} else if (that.currentTime < list[i].starttime) {
							list[i].btnStatus = '未开始';
						} else if (that.currentTime < list[i].endtime && that.currentTime > list[i].starttime) {
							list[i].btnStatus = '去抢购';
						}
					}
					if (that.page == 1) {
						that.shopList = list;
					} else {
						that.shopList.push(...list);
					}
					that.lastPage = data.list.last_page;
				} else {
					uni.showToast({
						title: msg,
						icon: 'error'
					});
				}
			});
		},
		//选择城市
		getCitys(citys) {
			this.$store.commit('positionText', citys.name);
			this.$store.commit('lat', citys.lat);
			this.$store.commit('lng', citys.lng);
			let selectedAddress = citys.mergename ? citys.mergename[2] : citys.name;
			this.$store.commit('selectedAddress', selectedAddress);
			this.$rangeObj(selectedAddress);
		},
		// 点击地址
		onLocation() {
			uni.navigateTo({
				url: '/pages/filePages/onLocation/onLocation'
			});
		},
		// 获取分类
		getCategoryList() {
			this.$request({
				url: 'common/categoryList'
			}).then((res) => {
				if (res.statusCode == 200) {
					this.navList = res.data.data;
					this.tid = this.navList[0].id;
					this.changeRange(this.rangeObj.home);
				}
			});
		},
		changeRange(e) {
			this.rangeIndex = e;
			this.page = 1;
			this.getList();
		},
		// 搜索
		search() {
			this.page = 1;
			this.getList();
		},
		// 删选事件
		onActive(index) {
			if (this.listIndex == index) {
				this.flag = !this.flag;
			} else {
				if (this.listIndex == 0) {
					this.flag = true;
				} else {
					this.flag = false;
				}
			}
			this.listIndex = index;
			//获取商品列表
			this.page = 1;
			this.getList();
		},
		// 点击分类
		clickNavList(id) {
			this.tid = id;
			this.navIndex = id;
			//获取商品列表
			this.page = 1;
			this.getList();
		},
		// 点击分类弹窗
		fuActive(id) {
			this.tid = id;
			//获取商品列表
			this.page = 1;
			this.getList();
		},
		// 控制分类开关
		onXianS() {
			this.show = !this.show;
		}
	}
};
</script>

<style scoped lang="scss">
// 筛选弹窗
.fu_chuang {
	width: 750upx;
	height: 1624upx;
	background: rgba(0, 0, 0, 0.5);
	position: fixed;
	top: 0;
	z-index: 99999;

	.c_fu_chuang {
		width: 686upx;
		background: #ffffff;
		border-radius: 24upx 24upx 24upx 24upx;
		margin-top: 382upx;

		.c_fu_txt_box {
			flex-wrap: wrap;
			padding-top: 34upx;
			padding-bottom: 8upx;

			.list_txt {
				margin-left: 46upx;
				margin-bottom: 30upx;

				.fu_txt {
					color: #333;
				}
			}
		}
	}
}
.fenlei {
	font-size: 0;
	width: 100rpx;
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 20%);
	position: absolute;
	top: 0;
	bottom: 0;
	right: -80rpx;
	margin: auto;
	z-index: 100;
}
.screen_list_box {
	// padding-left: 40upx;
	padding-bottom: 10upx;
	background-color: #ffffff;
	box-sizing: border-box;

	// margin-top: 16upx;
	.list_box {
		// margin-left: 53upx;

		.txt {
			color: #666666;
			font-size: 28rpx;
			// margin-top: 42upx;
		}

		.active_txt {
			// font-size: 24rpx;
			color: #333333;
		}

		.active_txt1 {
			color: #999999;
		}

		.img {
			width: 32upx;
			height: 32upx;
			display: inline-block;
			// margin-top: 43upx;
			margin-left: 4upx;
		}
	}

	.list_box:nth-child(1) {
		margin-left: 0;
	}
}
</style>
